<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-wrap">
        <text class="icon-search">🔍</text>
        <input 
          class="search-input" 
          type="text" 
          v-model="searchText" 
          placeholder="请输入关键词搜索" 
          @input="handleSearch" 
        />
      </view>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-bar">
      <scroll-view scroll-x class="filter-scroll" show-scrollbar="false">
        <view 
          class="filter-item" 
          :class="{ active: currentType === 'all' }" 
          @click="filterType('all')"
        >
          全部
        </view>
        <view 
          class="filter-item" 
          :class="{ active: currentType === 'article' }" 
          @click="filterType('article')"
        >
          文章
        </view>
        <view 
          class="filter-item" 
          :class="{ active: currentType === 'news' }" 
          @click="filterType('news')"
        >
          新闻
        </view>
        <view 
          class="filter-item" 
          :class="{ active: currentType === 'advertisement' }" 
          @click="filterType('advertisement')"
        >
          广告
        </view>
      </scroll-view>
    </view>

    <!-- 列表内容 -->
    <view class="list-container">
      <view 
        v-for="(item, index) in filteredDataList" 
        :key="item.nId" 
        class="list-item"
        :class="{ 'ad-item': item.type === 'advertisement' }"
      >
        <CustomTextView 
          :imgindex="index" 
          :images="item.images" 
          :title="item.title" 
          :isTop="item.isTop"
          :author="item.author" 
          :comments="item.comments" 
          :time="item.time" 
          :mode="item.mode"
          :bgColor="item.mode === 3 ? '#fef6e6' : '#ffffff'" 
          @click="onCustomViewClick(index)"
        >
          <template v-slot:tips>
            <view class="slotcontent" v-if="item.showSearch">
              <text>搜索：</text>
              <view class="borderbox"><text>今日金价</text></view>
              <view class="borderbox"><text>精选好物</text></view>
            </view>
          </template>
        </CustomTextView>
      </view>

      <!-- 空状态 -->
      <view v-if="filteredDataList.length === 0" class="empty-state">
        <text class="empty-text">暂无内容~</text>
      </view>
    </view>
  </view>
</template>

<script>
import CustomTextView from "../../../components/cardTextView.vue";

export default {
  components: {
    CustomTextView
  },
  data() {
    return {
      searchText: '', 
      currentType: 'all', 
      datalist: [
        {
          nId: "T15627",
          title: "14个月从100家开到1000家门店，蜜雪为何买下这家精酿啤酒商",
          isTop: true,
          author: "界面新闻",
          comments: 56,
          time: "2025.10.07",
          showSearch: false,
          mode: 1,
          images: [],
          type: 'article'
        },
        {
          nId: "B4485",
          title: "把握历史大势，共创美好未来（观沧海）",
          isTop: false,
          author: "人民日报",
          comments: 1025,
          time: "2025.10.25",
          showSearch: false,
          mode: 2,
          images: ["/static/logo.png"],
          type: 'news'
        },
        {
          nId: "B5956",
          title: "黄金还能走多远？卖方高呼“第三浪启动”，230多份研报看多",
          isTop: false,
          author: "新华社",
          comments: 452,
          time: "2025.10.28",
          showSearch: true,
          mode: 2,
          images: ["/static/logo.png"],
          type: 'news'
        },
        {
          nId: "AD001",
          title: "加微信交友群，喜欢就聊，找喜欢的人",
          isTop: false,
          author: "同城的人",
          comments: 0,
          time: "2025.10.08 09:50",
          showSearch: false,
          mode: 3,
          images: ["/static/logo.png", "/static/logo.png", "/static/logo.png"],
          type: 'advertisement'
        },
        {
          nId: "B5954",
          title: "奋进“十五五” 续写新篇章｜“人享其行、物畅其流”加快实现 重塑区域经济格局",
          isTop: false,
          author: "央视网",
          comments: 152200,
          time: "2025.10.28",
          showSearch: false,
          mode: 2,
          images: ["/static/logo.png"],
          type: 'news'
        },
        {
          nId: "S45895",
          title: "整治网络直播打赏乱象 中央网信办开展为期2个月专项行动",
          isTop: false,
          author: "央视网",
          comments: 59874,
          time: "2025.10.27",
          showSearch: false,
          mode: 2,
          images: ["/static/logo.png"],
          type: 'news'
        }
      ]
    };
  },
  computed: {
    filteredDataList() {
      let result = this.datalist;
      if (this.currentType !== 'all') {
        result = result.filter(item => item.type === this.currentType);
      }
      if (this.searchText) {
        const keyword = this.searchText.toLowerCase();
        result = result.filter(item => 
          item.title.toLowerCase().includes(keyword) || 
          item.author.toLowerCase().includes(keyword)
        );
      }
      return result;
    }
  },
  methods: {
    onCustomViewClick(index) {
      console.log("点击了第", index, "项");
    },
    handleSearch() {},
    filterType(type) {
      this.currentType = type;
    }
  }
};
</script>

<style scoped>
/* 全局容器 */
.container {
  padding: 20rpx 24rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
}

/* 搜索栏 */
.search-bar {
  margin-bottom: 28rpx;
}
.search-wrap {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 40rpx;
  padding: 8rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
.icon-search {
  font-size: 32rpx;
  color: #999999;
  margin-right: 12rpx;
}
.search-input {
  flex: 1;
  height: 56rpx;
  line-height: 56rpx;
  font-size: 28rpx;
  color: #333333;
}
.search-input::placeholder {
  color: #cccccc;
}

/* 筛选栏 */
.filter-bar {
  margin-bottom: 28rpx;
}
.filter-scroll {
  white-space: nowrap;
  padding: 4rpx 0;
}
.filter-item {
  display: inline-block;
  padding: 12rpx 28rpx;
  margin-right: 16rpx;
  border-radius: 30rpx;
  background-color: #ffffff;
  font-size: 28rpx;
  color: #555555;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}
.filter-item.active {
  background-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 4rpx 12rpx rgba(37, 99, 235, 0.2);
}
.filter-item:last-child {
  margin-right: 12rpx;
}

/* 列表容器 */
.list-container {
  width: 100%;
}
.list-item {
  background-color: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 3rpx 15rpx rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease;
}
.list-item:active {
  transform: scale(0.99);
}
/* 广告项特殊样式 */
.ad-item {
  background-color: #fef6e6;
  border: 1rpx solid #ffe8b0;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 100rpx 0;
  color: #999999;
  font-size: 28rpx;
}

/* 插槽内容 */
.slotcontent {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 20rpx 0;
  font-size: 26rpx;
  color: #666666;
  gap: 16rpx;
  border-top: 1rpx solid #f5f5f5;
  margin-top: 12rpx;
}
.borderbox {
  border: 1rpx solid #d0e3ff;
  border-radius: 12rpx;
  padding: 8rpx 18rpx;
  background: linear-gradient(135deg, #f0f7ff, #e1eeff);
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.03);
}
.borderbox text {
  font-size: 24rpx;
  color: #2563eb;
  font-weight: 500;
}
</style>